<div id="loading_spinner" class="well well-sm">

    <div class="inline middle blue bigger-110"><i
            class="icon-spinner icon-spin orange bigger-125"></i>
        Loading
        content...
    </div>
</div>

<div class="row-fluid">

    <table id="items_table"
           class="table table-striped table-bordered table-hover hide">

        <thead>

        </thead>

        <tbody>

        </tbody>

    </table>
</div>


<script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.dataTables.min.js") }}'></script>
<script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.dataTables.bootstrap.js") }}'></script>
<script src='{{ request.static_url("stalker_pyramid:static/stalker/js/dataTable_num-html_sort.js") }}'></script>


<script>
    function init_html_modal() {
        console.debug('starting to initialize init_html_modal dialog!!!');

        {% if filter.entity_type=='Status' %}

            $('#html_template_label').find('span').remove();
            $('#html_template_label').append('<span>{{ filter.name }}</span>')

            $('#html_template_header').attr('class', 'table-header header-color-' + '{{ filter.html_class }}')


        {% endif %}



        $(document).ready(function () {
            // fill items table with dynamic data
            $.getJSON('{{ request.route_path('get_entity_tasks_by_filter', id=entity.id, f_id=filter.id) }}').then(function (data) {

                var thead_template = doT.template($('#tmpl_itemThead').html());
                var table_head = $('#items_table>thead');
                table_head.append(thead_template({}));


                var items = data;
                var row_template = doT.template($('#tmpl_itemRow').html());


                // wait until document is ready
                $(function () {

                    var i;
                    var table_body = $('#items_table>tbody');
                    for (i = 0; i < data.length; i++) {
                        // fix dates
                        // data[i].date_created = new Date(data[i].date_created).format('yyyy-mm-dd HH:MM');

                        if (data[i].thumbnail_full_path == null) {
                            data[i].thumbnail_full_path = '{{ request.static_url("stalker_pyramid:static/stalker/images/T_NO_IMAGE.gif") }}';
                        }
                        else {
                            data[i].thumbnail_full_path = '/' + data[i].thumbnail_full_path;
                        }

                        data[i].came_from = '{{ request.current_route_path() }}'

                        // append it to the table
                        table_body.append(row_template(data[i]));
                    }

                    var oTable1 = $('#items_table').dataTable();

                    $('#items_table').show();
                    $('#loading_spinner').hide();

                });
            });
        });

        console.debug('finished initializing the init_html_modal dialog!')
    }
</script>

<script type="text/javascript">
    function destruct_html_modal() {

        $('#items_table').unbind()

        $('#html_template').data('modal', null);

    }
</script>
